<template>
  <div class="hydraulic-climbing-container">
    <div class="env-con">
      <p>
        <span>天气: </span>
        <span>小雨</span>
      </p>
      <p>
        <span>温度: </span>
        <span>23℃</span>
      </p>
      <p>
        <span>湿度: </span>
        <span>60%</span>
      </p>
      <p>
        <span>风速: </span>
        <span>1m/s</span>
      </p>
    </div>
    <!-- <div class="iframe-btn-container">
      <div @click="handleTajiBtnClick(1076)">塔机#1</div>
      <div @click="handleTajiBtnClick(1077)">塔机#2</div>
      <div @click="handleTajiBtnClick(1078)">动臂塔#1</div>
      <div @click="handleTajiBtnClick(1079)">动臂塔#2</div>
    </div> -->
    <div class="hydraulic-left-con">
      <div class="left-top">
        <div class="part-header-con">
          <p>爬模状态</p>
          <span @click="handleDetailClick" style="font-size: 14px">详情</span>
        </div>
        <div class="part-content-con">
          <div>
            <div>位置</div>
            <div>当前节段</div>
            <div>当前高度</div>
            <div>功效</div>
          </div>
          <div>
            <div>1#塔肢</div>
            <div>第5节</div>
            <div>30.255m</div>
            <div>16d/节</div>
          </div>
          <div>
            <div>2#塔肢</div>
            <div>第5节</div>
            <div>30.255m</div>
            <div>16d/节</div>
          </div>
          <div>
            <div>3#塔肢</div>
            <div>第5节</div>
            <div>30.255m</div>
            <div>16d/节</div>
          </div>
          <div>
            <div>4#塔肢</div>
            <div>第6节</div>
            <div>36.042m</div>
            <div>16d/节</div>
          </div>
        </div>
      </div>
      <div class="left-center">
        <div class="part-header-con">人员管理</div>
        <div class="part-content-con">
          <div style="width: 100%; height: 100%" ref="bar"></div>
        </div>
      </div>
      <div class="left-bottom">
        <div class="part-header-con">
          <!-- 智能喷淋 -->
          智能养护
        </div>
        <div class="part-content-con">
          <div>
            <div></div>
            <div>当前状态</div>
            <div>内部温度</div>
            <div>外部温度</div>
          </div>
          <div>
            <div>1#塔肢</div>
            <div>开启</div>
            <div>54.3℃</div>
            <div>38.1℃</div>
          </div>
          <div>
            <div>2#塔肢</div>
            <div>开启</div>
            <div>57.6℃</div>
            <div>47.3℃</div>
          </div>
          <div>
            <div>3#塔肢</div>
            <div>开启</div>
            <div>56.7℃</div>
            <div>44.6℃</div>
          </div>
          <div>
            <div>4#塔肢</div>
            <div>开启</div>
            <div>65.3℃</div>
            <div>50.1℃</div>
          </div>
        </div>
      </div>
    </div>
    <div class="hydraulic-center-con">
      <div class="part-header-con">
        <p>安全预警</p>
        <div class="select-area">
          <el-select v-model="value" size="mini" @change="handleSelectChange">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="part-content-con">
        <div>
          <h3>数据监控</h3>
          <div>
            <div>
              <div>
                <span>当前值: </span>
                <span>/</span>
              </div>
              <div>
                <span>当前值: </span>
                <span>/</span>
              </div>
              <div>
                <span>当前值: </span>
                <span>/</span>
              </div>
              <div>
                <span>当前值: </span>
                <span>/</span>
              </div>
            </div>
            <div>
              <div>
                <span>预警值: </span>
                <span>/</span>
              </div>
              <div>
                <span>预警值: </span>
                <span>/</span>
              </div>
              <div>
                <span>预警值: </span>
                <span>/</span>
              </div>
              <div>
                <span>预警值: </span>
                <span>/</span>
              </div>
            </div>
            <div>
              <div class="title-name">1#塔肢</div>
              <div class="title-name">2#塔肢</div>
              <div class="title-name">3#塔肢</div>
              <div class="title-name">4#塔肢</div>
            </div>
          </div>
        </div>
        <div>
          <h3>预警记录</h3>
          <el-table :data="data1" style="width: 100%">
            <el-table-column
              align="center"
              prop="series"
              label="序号"
              width="70"
            >
            </el-table-column>
            <el-table-column align="center" prop="position" label="位置">
            </el-table-column>
            <el-table-column align="center" prop="earlyWarn" label="预警值">
            </el-table-column>
            <el-table-column align="center" prop="callPolice" label="报警值">
            </el-table-column>
            <el-table-column align="center" prop="time" label="时间">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="hydraulic-right-con">
      <div class="right-top">
        <div @click="handleTitleToggle" class="part-header-con">
          {{ isVideoShow ? "视频监控" : "最新违规行为分析" }}

          <div style="margin-left: 30px; width: 30%" class="select-area">
            <el-select
              v-model="videValue"
              size="mini"
              @change="handleSelectChange1"
            >
              <el-option
                v-for="item in videoOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="part-content-con">
          <div
            v-if="!isVideoShow"
            class="violations-con"
            style="width: 100%; height: 100%"
          >
            <div
              style="width: 100%; height: 100%; padding: 5px; overflow: hidden"
            >
              <div class="imgs-container" v-if="data2.length">
                <div
                  class="img-conta"
                  v-for="(item, index) in data2"
                  :key="index"
                >
                  <div>
                    <img
                      @click.prevent.stop="handleImgClick(item)"
                      :src="item.url"
                      alt=""
                    />
                  </div>
                  <div>
                    <p>
                      <span>时间:</span>
                      <span>{{ item.time }}</span>
                    </p>
                    <p>
                      <span>人员:</span>
                      <span>{{ item.person }}</span>
                    </p>
                    <p>
                      <span>点位:</span>
                      <span>{{ item.point }}</span>
                    </p>
                    <p>
                      <span>类型:</span>
                      <span>{{ item.type }}</span>
                    </p>
                  </div>
                </div>
              </div>
              <div style="color: white; text-align: center" v-else>
                暂无数据
              </div>
            </div>
          </div>
          <div v-if="isVideoShow" style="height: 100%">
            <div class="video-container" style="height: 50%">
              <div>
                <iframe
                  :src="videoUrl"
                  webkitallowfullscreen=""
                  mozallowfullscreen=""
                  allowfullscreen=""
                  frameborder="0"
                ></iframe>
              </div>

              <!-- <div>
                <iframe
                  src="http://119.36.93.100:8354/Video/?name=channel12"
                  webkitallowfullscreen=""
                  mozallowfullscreen=""
                  allowfullscreen=""
                  frameborder="0"
                ></iframe>
              </div> -->
            </div>

            <!-- <div class="violations-con" style="width: 100%; height: 50%">
              <div
                style="
                  width: 100%;
                  height: 100%;
                  padding: 5px;
                  overflow: hidden;
                "
              >
                <div class="imgs-container" v-if="data3.length">
                  <div
                    class="img-conta"
                    v-for="(item, index) in data3"
                    :key="index"
                  >
                    <div>
                      <img
                        @click.prevent.stop="handleImgClick(item)"
                        :src="item.url"
                        alt=""
                      />
                    </div>
                    <div>
                      <p>
                        <span>时间:</span>
                        <span>{{ item.time }}</span>
                      </p>
                      <p>
                        <span>人员:</span>
                        <span>{{ item.person }}</span>
                      </p>
                      <p>
                        <span>类型:</span>
                        <span>{{ item.type }}</span>
                      </p>
                    </div>
                  </div>
                </div>
                <div style="color: white; text-align: center" v-else>
                  暂无数据
                </div>
              </div>
            </div> -->
          </div>
        </div>
      </div>
      <div class="right-center">
        <div class="part-header-con">最新违规行为分析</div>
        <div class="part-content-con">
          <div class="violations-con" style="width: 100%; height: 100%">
            <div
              style="
                width: 100%;
                height: 100%;
                padding: 5px;
                overflow: hidden;
              "
            >
              <div class="imgs-container" v-if="data3.length">
                <div
                  class="img-conta"
                  v-for="(item, index) in data3"
                  :key="index"
                >
                  <div>
                    <img
                      @click.prevent.stop="handleImgClick(item)"
                      :src="item.url"
                      alt=""
                    />
                  </div>
                  <div>
                    <p>
                      <span>时间:</span>
                      <span>{{ item.time }}</span>
                    </p>
                    <p>
                      <span>人员:</span>
                      <span>{{ item.person }}</span>
                    </p>
                    <p>
                      <span>点位:</span>
                      <span>{{ item.point }}</span>
                    </p>
                    <p>
                      <span>类型:</span>
                      <span>{{ item.type }}</span>
                    </p>
                  </div>
                </div>
              </div>
              <div style="color: white; text-align: center" v-else>
                暂无数据
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-bottom">
        <div class="part-header-con">主塔质量管理</div>
        <div class="part-content-con">
          <div class="btn-area">
            <div @click="handleToggle1">
              <span
                :class="{
                  active: active1 === '全部',
                }"
                >全部</span
              >
              <span
                :class="{
                  active: active1 === '当天',
                }"
                >当天</span
              >
              <span
                :class="{
                  active: active1 === '本周',
                }"
                >本周</span
              >
              <span
                :class="{
                  active: active1 === '本月',
                }"
                >本月</span
              >
            </div>
            <div @click="handleToggle2">
              <span
                :class="{
                  active: active2 === '全部',
                }"
                >全部</span
              >
              <span
                :class="{
                  active: active2 === '未整改',
                }"
                >未整改</span
              >
              <span
                :class="{
                  active: active2 === '已整改',
                }"
                >已整改</span
              >
            </div>
          </div>

          <div class="list-area">
            <div class="list-con" v-if="list.length">
              <div class="list-item" v-for="(item, index) in list" :key="index">
                <div class="state-area">
                  <span>{{ item.state }}</span>
                  <span @click="handleQuestionDetailClick">详情</span>
                </div>
                <p>
                  <span>问题名称:</span>
                  <span>{{ item.name }}</span>
                </p>
                <p>
                  <span>问题部位:</span>
                  <span>{{ item.position }}</span>
                </p>
                <p>
                  <span>上报时间:</span>
                  <span>{{ item.reportingTime }}</span>
                </p>
                <div class="rec-con">
                  <p>
                    <span>整改人:</span>
                    <span>{{ item.recPeople }}</span>
                  </p>
                  <p>
                    <span>整改时间:</span>
                    <span>{{ item.recTime }}</span>
                  </p>
                </div>
                <p>
                  <span>问题描述:</span>
                  <span>{{ item.content }}</span>
                </p>
              </div>
            </div>
            <div v-else style="color: white; text-align: center">暂无数据</div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      :title="imgDialogTitle"
      :visible.sync="imgDialogVisible"
      width="900px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="dialog-img-con">
        <img :src="currentImg" :alt="imgDialogTitle" />
      </div>
    </el-dialog>

    <el-dialog
      title="功效分析"
      :visible.sync="effectDialogVisible"
      width="900px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="dialog-effect-con">
        <div>
          <div ref="line1"></div>
          <h3>1#塔肢</h3>
        </div>
        <div>
          <div ref="line2"></div>
          <h3>2#塔肢</h3>
        </div>
        <div>
          <div ref="line3"></div>
          <h3>3#塔肢</h3>
        </div>
        <div>
          <div ref="line4"></div>
          <h3>4#塔肢</h3>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      title="问题详情"
      :visible.sync="effectQuestionVisible"
      width="500px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="dialog-question-con">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
          >
            <div v-for="(item, key) in activity" :key="key">
              <div>
                <span v-if="key !== 'time'">{{ key }}</span>
                <span>{{ item }}</span>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-dialog>

    <div class="people-list-con" v-if="peopleListVisiable">
      <div class="part-header-con">
        <p>人员管理</p>
        <span @click="() => (peopleListVisiable = false)">
          <i class="el-icon-close"></i>
        </span>
      </div>
      <div class="part-content-con">
        <div>
          <h3>实时看板</h3>
          <div>
            <div>
              <div>
                <span>33</span>
                <span>人</span>
              </div>
              <h4>施工总人数</h4>
            </div>
            <div>
              <div>
                <span>7.8</span>
                <span>小时</span>
              </div>
              <h4>人均工时</h4>
            </div>
            <div>
              <div>
                <span>82</span>
                <span>人</span>
              </div>
              <h4>今日累计进场</h4>
            </div>
          </div>

          <div>
            <h5>当前进出人员</h5>
            <div>
              <div>
                <div>
                  <img :src="img" alt="" />
                  <p>进场时间</p>
                </div>
                <div>
                  <p>
                    <span>姓名</span>
                    <span>年龄</span>
                  </p>
                  <p>
                    <span>工种</span>
                    <span>班组长</span>
                  </p>
                  <p>劳务队&班组信息</p>
                  <p>劳务公司名称</p>
                  <p>认证信息</p>
                </div>
              </div>
              <div ref="radar"></div>
            </div>
          </div>

          <div>
            <div
              :style="{
                backgroundImage: `linear-gradient(
                  90deg,
                  rgba(15, 58, 111, 0.6),
                  rgba(25, 181, 194, 0.8)
                )`,
              }"
            >
              <img :src="img" alt="" />
              <div>
                <div>
                  <span>姓名</span>
                  <span>年龄</span>
                  <span>工种</span>
                  <span>班组长</span>
                </div>
                <div>
                  <span>进场时间</span>
                  <span>~</span>
                  <span>出场时间</span>
                  <span>今日工时: 8.2h</span>
                </div>
              </div>
              <span>进场</span>
            </div>

            <div
              :style="{
                backgroundImage: `linear-gradient(
                  90deg,
                  rgba(15, 58, 111, 0.6) 0,
                  rgba(25, 181, 194, 0.6) 70%,
                  rgba(173, 10, 51, 0.8) 100%
                )`,
              }"
            >
              <img :src="img" alt="" />
              <div>
                <div>
                  <span>姓名</span>
                  <span>年龄</span>
                  <span>工种</span>
                  <span>班组长</span>
                </div>
                <div>
                  <span>进场时间</span>
                  <span>~</span>
                  <span>出场时间</span>
                  <span>今日工时: 8.2h</span>
                </div>
              </div>
              <span>禁入</span>
            </div>

            <div
              :style="{
                backgroundImage: `linear-gradient(
                  90deg,
                  rgba(25, 181, 194, 0.8),
                  rgba(15, 58, 111, 0.6)
                )`,
              }"
            >
              <img :src="img" alt="" />
              <div>
                <div>
                  <span>姓名</span>
                  <span>年龄</span>
                  <span>工种</span>
                  <span>班组长</span>
                </div>
                <div>
                  <span>进场时间</span>
                  <span>~</span>
                  <span>出场时间</span>
                  <span>今日工时: 8.2h</span>
                </div>
              </div>
              <span>出场</span>
            </div>

            <div
              :style="{
                backgroundImage: `linear-gradient(
                  90deg,
                  rgba(15, 58, 111, 0.6),
                  rgba(25, 181, 194, 0.8)
                )`,
              }"
            >
              <img :src="img" alt="" />
              <div>
                <div>
                  <span>姓名</span>
                  <span>年龄</span>
                  <span>工种</span>
                  <span>班组长</span>
                </div>
                <div>
                  <span>进场时间</span>
                  <span>~</span>
                  <span>出场时间</span>
                  <span>今日工时: 8.2h</span>
                </div>
              </div>
              <span>进场</span>
            </div>

            <div
              :style="{
                backgroundImage: `linear-gradient(
                  90deg,
                  rgba(15, 58, 111, 0.6),
                  rgba(25, 181, 194, 0.8)
                )`,
              }"
            >
              <img :src="img" alt="" />
              <div>
                <div>
                  <span>姓名</span>
                  <span>年龄</span>
                  <span>工种</span>
                  <span>班组长</span>
                </div>
                <div>
                  <span>进场时间</span>
                  <span>~</span>
                  <span>出场时间</span>
                  <span>今日工时: 8.2h</span>
                </div>
              </div>
              <span>进场</span>
            </div>

            <div
              :style="{
                backgroundImage: `linear-gradient(
                  90deg,
                  rgba(15, 58, 111, 0.6),
                  rgba(25, 181, 194, 0.8)
                )`,
              }"
            >
              <img :src="img" alt="" />
              <div>
                <div>
                  <span>姓名</span>
                  <span>年龄</span>
                  <span>工种</span>
                  <span>班组长</span>
                </div>
                <div>
                  <span>进场时间</span>
                  <span>~</span>
                  <span>出场时间</span>
                  <span>今日工时: 8.2h</span>
                </div>
              </div>
              <span>进场</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      :visible.sync="isShowTajiDialog"
      width="1500px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      class="taji-dialog"
    >
      <div
        v-if="isShowTajiDialog"
        style="width: 100%;height: 800px;"
      >
        <iframe
          style="display: block;width: 100%;height: 100%;"
          :src="currentIframeSrc"
          frameborder="0"
        >
        </iframe>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import * as echarts from "echarts";
import walden from './walden.json'
import { GetViolationsAlarmList } from '@/api/people-grid/index.js'
import img from '@/assets/projInfo/1.jpg'
export default {
  data () {
    this.barOptions = {
      legend: {
        textStyle: {
          color: 'white'
        }
      },
      tooltip: {},
      dataset: {
        source: [
          ['product', '当前人数', '工人', '管理人员'],
          ['1#塔肢', 30, 20, 5],
          ['2#塔肢', 40, 32, 6],
          ['3#塔肢', 30, 18, 6],
          ['4#塔肢', 35, 25, 7]
        ]
      },
      grid: {
        left: '8%',
        right: '4%',
        bottom: '10%',
        top: '15%'
      },
      xAxis: {
        type: 'category',
        axisLine: {
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)']
          }
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          textStyle: {
            color: '#fff'
          }
        }
      },
      yAxis: {
        axisLine: {
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)']
          }
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          textStyle: {
            color: '#fff'
          }
        }
      },
      series: [
        {
          type: 'bar',
          barGap: 0.2,
          barWidth: '15%',
          itemStyle: {
            borderRadius: [5, 5, 0, 0]
          }
        },
        {
          type: 'bar',
          barGap: 0.2,
          barWidth: '15%',
          itemStyle: {
            borderRadius: [5, 5, 0, 0]
          }
        },
        {
          type: 'bar',
          barGap: 0.2,
          barWidth: '15%',
          itemStyle: {
            borderRadius: [5, 5, 0, 0]
          }
        }
      ]
    }
    this.lineOptions = {
      legend: {
        textStyle: {
          color: 'white'
        }
      },
      tooltip: {},
      dataset: {
        source: [
          ['product', '模板(㎡/人/d)', '钢筋(t/人/d)', '混凝土(m³/人/d)'],
          ['当前节段', 2.5, 0.18, 6.76],
          ['累计', 2.5, 0.18, 6.76]
        ]
      },
      grid: {
        left: '8%',
        right: '4%',
        bottom: '12%',
        top: '15%'
      },
      xAxis: {
        type: 'category',
        axisLine: {
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)']
          }
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          textStyle: {
            color: '#fff'
          }
        }
      },
      yAxis: {
        axisLine: {
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)']
          }
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          textStyle: {
            color: '#fff'
          }
        }
      },
      series: [
        {
          type: 'bar',
          barGap: 0.2,
          barWidth: '8%',
          itemStyle: {
            borderRadius: [5, 5, 0, 0]
          }
        },
        {
          type: 'bar',
          barGap: 0.2,
          barWidth: '8%',
          itemStyle: {
            borderRadius: [5, 5, 0, 0]
          }
        },
        {
          type: 'bar',
          barGap: 0.2,
          barWidth: '8%',
          itemStyle: {
            borderRadius: [5, 5, 0, 0]
          }
        }
      ]
    }
    this.radarOptions = {
      tooltip: {},
      grid: {
        left: '5%',
        right: '6%',
        bottom: '3%',
        top: '5%',
        containLabel: true
      },
      radar: {
        name: {
          textStyle: {
            color: '#0bc8ac',
            width: '20px'
          }
        },
        splitLine: {
          show: false
        },
        radius: '50%',
        center: ['52%', '50%'],
        indicator: [
          { name: '安全积分', max: 6500 },
          { name: '平均工时', max: 16000 },
          { name: '累计工时', max: 30000 },
          { name: '出勤次数', max: 38000 },
          { name: '今日工时', max: 52000 }
        ]
      },
      series: [
        {
          type: 'radar',
          data: [
            {
              value: [4300, 10000, 28000, 35000, 50000],
              name: '平均值',
              lineStyle: {
                width: 2
              },
              symbolSize: 4
            },
            {
              value: [5000, 14000, 28000, 31000, 42000],
              name: '当前工人',
              lineStyle: {
                width: 2
              },
              symbolSize: 4
            }
          ]
        }
      ]
    }
    return {
      isShowTajiDialog: false,
      isVideoShow: true,
      img,
      value: '0',
      options: [
        {
          value: '0',
          label: '静载监控'
        },
        {
          value: '1',
          label: '动载监控'
        }
      ],
      videoUrl: 'http://119.36.93.100:8354/Video/?name=channel11',
      videValue: '11',
      videoOptions: [
        {
          value: '12',
          label: '东塔吊'
        },
        {
          value: '11',
          label: '西塔吊'
        }
      ],
      active1: '全部',
      active2: '全部',
      imgDialogTitle: '',
      imgDialogVisible: false,
      currentImg: '',
      effectDialogVisible: false,
      effectQuestionVisible: false,
      peopleListVisiable: false,
      data1: [
        {
          series: 1,
          position: '/',
          earlyWarn: '/',
          callPolice: '/',
          time: '/'
        }
      ],
      data2: [],
      data3: [],
      list: [
        {
          name: '表面局部存在少量气泡',
          position: '②号塔柱第三节6m段B面',
          reportingTime: '2021年9月28日',
          recPeople: '方林',
          recTime: '9月30日',
          content: '②号塔柱第三节6m段B面表面局部存在少量气泡',
          state: '已保存, 未发布'
        },
        {
          name: '混凝土表面色差和麻面',
          position: '④号塔柱第四节3m段E面',
          reportingTime: '2021年10月10日',
          recPeople: '方林',
          recTime: '10月13日',
          content: '④号塔柱第四节3m段E面混凝土表面局部存在色差和麻面',
          state: '已保存, 未发布'
        },
        // {
        //   name: '混凝土蜂窝麻面',
        //   position: '主塔2#塔肢15节段',
        //   reportingTime: '2021/4/10',
        //   recPeople: '张淋彬',
        //   recTime: '2021/4/10',
        //   content: '主塔2#塔肢B面存在5处蜂窝麻面',
        //   state: '已保存, 未发布'
        // },
        // {
        //   name: '混凝土蜂窝麻面',
        //   position: '主塔2#塔肢15节段',
        //   reportingTime: '2021/4/10',
        //   recPeople: '张淋彬',
        //   recTime: '2021/4/10',
        //   content: '主塔2#塔肢B面存在5处蜂窝麻面',
        //   state: '已保存, 未发布'
        // }
      ],
      activities: [
        {
          time: '2021/04/08 16:13:04',
          '工程部位：': '主塔2#塔肢15节段',
          '问题分类：': '主塔2#塔肢',
          '问题描述：': '主塔2#塔肢B面存在5处蜂窝麻面',
          '上报人：': '张淋彬',
          '上报时间：': '2021/04/08 16:13:04'
        },
        {
          time: '.'
        }
      ],
      currentIframeSrc: ''
    }
  },
  inject: [
    'getViewer',
    'handleAreaData',
    'removeGrid',
    'handleHtmlLabelShow',
    'handleModelDisplay'
  ],
  activated () {
    this.cameraFlyTo()
    this.handleHtmlLabelShow([
      {
        type: '4',
        handler: (event) => {
          this.peopleListVisiable = true
          this.$nextTick(() => {
            this.drawRadar()
          })
        }
      }
    ])
    this.handleModelDisplay(['zhuqiaoTileset'])

    this.drawBar()

    this.getViolationsAlarmList(false)
  },
  methods: {
    handleTajiBtnClick (item) {
      this.currentIframeSrc =
        'http://jx-linkcreate.cn:8080/#/DeviceMonitor/views/DeviceRealTime/DeviceRealTime2D?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJNSU5HIiwiZXhwIjoxNzE3MDg0ODAwLCJpYXQiOjE2MjE0NzY3NzYsImFjY291bnQiOiJ3aW5zdG9uLTE2OSJ9.zVuuEb_aGvRE9Q8DF8MzpUrm52HJ1vioojGLz7zyQWY&fullscreen=1&sidebar=0&deviceId=' + item

      this.$nextTick(() => {
        this.isShowTajiDialog = true
      })
    },
    handleSelectChange () {

    },
    handleTitleToggle () {
      // this.isVideoShow = !this.isVideoShow;
    },
    cameraFlyTo () {
      const viewer = this.getViewer()
      viewer.camera.flyTo({
        destination: {
          x: -2704375.736390461,
          y: 4690874.873157363,
          z: 3360338.7863809187
        },
        orientation: {
          heading: 6.1996333900179375,
          pitch: -0.2831979387394121,
          roll: 6.282923226019143
        }
      })
    },
    handleToggle2 (e) {
      const target = e.target
      if (target.tagName !== 'SPAN') return
      this.active2 = target.textContent
    },
    handleToggle1 (e) {
      const target = e.target
      if (target.tagName !== 'SPAN') return
      this.active1 = target.textContent
    },
    drawBar () {
      this.$refs.bar.removeAttribute('_echarts_instance_')
      this.barCharts = echarts.init(this.$refs.bar, walden)
      this.barCharts.setOption(this.barOptions, true)
    },
    drawRadar () {
      this.$refs.radar.removeAttribute('_echarts_instance_')
      this.radarCharts = echarts.init(this.$refs.radar, walden)
      this.radarCharts.setOption(this.radarOptions, true)
    },
    handleDetailClick () {
      this.effectDialogVisible = true
      this.$nextTick(() => {
        this.drawLine()
      })
    },
    handleQuestionDetailClick () {
      this.effectQuestionVisible = true
    },
    handleSelectChange1 (e) {
      // TODO 增加下拉列表的切换功能
      this.videoUrl = 'http://119.36.93.100:8354/Video/?name=channel' + e
    },
    handleImgClick (data) {
      this.imgDialogTitle = data.type + '-' + data.time
      this.currentImg = data.url
      this.imgDialogVisible = true
    },
    getViolationsAlarmList (lazy) {
      this.timer = setTimeout(
        () => {
          GetViolationsAlarmList().then((res) => {
            if (!res.success) return this.getViolationsAlarmList(true)
            const data = res.data

            this.datalist = data

            this.data2 = data.map((item) => {
              return {
                url: 'http://58.49.74.231:85' + item.ViolationPhoto,
                time: item.time,
                person: item.Name || '未识别',
                point: item.VideoName,
                type: item.Event_description
              }
            })

            this.data3 = data.filter(item => {
              return item.VideoName.includes('塔吊')
            }).map((item) => {
              return {
                url: 'http://58.49.74.231:85' + item.ViolationPhoto,
                time: item.time,
                person: item.Name || '未识别',
                point: item.VideoName,
                type: item.Event_description
              }
            })

            // 过滤数据赋值给data3
            // this.data2.forEach((el) => {
            //   let str = el.point + "";
            //   if (str.indexOf("塔吊") != -1) {
            //     this.data3.push(el);
            //   }
            // });

            // this.getViolationsAlarmList(true)
          })
        },
        lazy ? 10000 : 0
      )
    },
    drawLine () {
      for (let i = 1; i < 5; i++) {
        this.$refs['line' + i].removeAttribute('_echarts_instance_')
        this.lineCharts = echarts.init(this.$refs['line' + i], walden)
        this.lineCharts.setOption(this.lineOptions, true)
      }
    }
  }
}
</script>

<style lang="less">
@import url("./index.less");
</style>
